<template>
  <div class="navbar flex flex-between fixedTop">
    <div class="left textAlignCenter marginAuto0 flex" @click="goBack">
      <slot name="left">
        <img class="marginAuto0" src="@/assets/img/back.png">
        <p class="marginAuto0">返回</p>
      </slot>
    </div>
    <div class="center textAlignCenter marginAuto0">
      <slot name="center">Title</slot>
    </div>
    <div class="right textAlignCenter marginAuto0">
      <slot name="right">
        <img src="@/assets/img/search.png">
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "navbar",
  methods:{
    goBack(){
      this.$router.back();
    }
  }
}
</script>

<style scoped>
.navbar {
  height: 2rem;
  padding: 0 .2rem;
  background-color: #fff;
}
.left, .right {width: 20%;}
.left img {
  width: .5rem;
  height: .5rem;
  margin-right: .1rem;
}
.left p {font-size: .5rem;}
.right img{
  width: .6rem;
  height: .6rem;
}
.center {
  flex: 1;
  font-size: .6rem;
  font-weight: 600;
}
</style>